<script setup>
import { ref, toRefs } from 'vue';

const obj = ref({
  name: 'zs',
  age: 20,
});
// toRefs 作用：把对象属性解构出来，并且转化成 ref 对象，保持响应式的追踪
// 注意：不要使用 toRef，要使用的是 toRefs
const { name, age } = toRefs(obj.value);

// const { name, age } = obj.value;
// const name = obj.value.name;
</script>

<template>
  <div>
    <div>name - {{ name }}</div>
    <div>age - {{ age }}</div>
    <button @click="obj.age++">点我年龄+1</button>

    <div>obj.name - {{ obj.name }}</div>
    <div>obj.age - {{ obj.age }}</div>
  </div>
</template>
